<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备寿命监测</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link href="/static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/index_s.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link href="/static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/public.css">
    <!--日期-->
    <link rel="stylesheet" href="/static/plugins/jedate/jedate.css">
    <link href="/static/css/loss_Statistics.css" rel="stylesheet">
    <style>
        .itemBox{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            border: 1px solid #DDDDDD;
            border-radius: 5px;
            margin-top: 10px;
            cursor: pointer;
            color: #000;
            position: relative;
        }
        .triangle {
            position: absolute;
            top: 0;
            right: 0;
            display: none;
            width: 0;
            height: 0;
            border-right: 20px solid #ff5d5b;
            border-bottom: 20px solid transparent;
            border-left: 20px solid transparent;
            color: #fff;
        }
        .triangle i {
            position: absolute;
            top: 0;
            right: -20px;
            font-size: 8px;
            font-weight: 100;
        }
        .itemBox.now .triangle{
            display: block;
        }
        .itemBox.now{
            border: 1px solid #ff5d5b;
        }
        .echartBox{
            width: 100%;
            height: 100%;
            border: 2px solid #dcdcdc;
        }
        .Echart {
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
        .text-center{
            margin-top: 10px;
        }
    </style>
</head>
<body style="background-color:#eee">
<div id="box" style="margin: 10px">
    <div class="float-clear">
        <div class="float-left contentBox border-all" style="width:18%;margin: 0 0.5%;">
            <div class="content-title border-bottom">
                <span>设备寿命监测</span>
            </div>
            <div class="content-center">
                <p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
                <p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
                <div id="treeview7" class="test"></div>
            </div>
        </div>
        <div class="float-left contentBox border-all" style="width:80.5%;overflow: auto;">
            <div class="content-title border-bottom" style="position:relative;">
                <span>{{treeTitle.name}}</span>
            </div>
            <div class="ibox-content" style="position:relative;padding: 0">
                <div class="float-clear" style="height: 100%;">
                    <div class="float-left" style="width:12%;height: 100%;margin-right:1%;overflow: auto;padding: 2px 10px">
                        <p class="text-center" v-if="itemListLoading && itemList.length==0">暂时没有设备数据,请添加</p>
                            <div class="itemBox" v-for="(item,index) in itemList" @click="itemFun(item,index)" :class="{now:index==oldIndex}">
                            <div class="triangle"><i class="glyphicon glyphicon-ok"></i></div>
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                    <div class="float-left" style="width:86%;height: 100%; overflow: auto;">
                        <div class="echartBox" style="position: relative;">
                            <h3 style="text-align: center;color: #000;width: 100%;position: absolute;top: 10px;">{{EChartNmae}}</h3>
                            <div class="Echart" id="lifeChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/static/js/jquery.min.js"></script>

<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script src="/static/js/vue.min.js"></script>
<!--bootstrap-tree-->
<script src="/static/plugins/bootstrap-tree/bootstrap-treeview.js"></script>
<!--日期-->
<script src="/static/plugins/jedate/jedate.js"></script>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            leftTreeLoading: true,               //左侧树结构加载判断
            leftTreeList:[],                        //左侧树结构
            treeTitle: {
                id: null,
                name: '设备寿命监测'
            },                  //模态框title的类型 添加|编辑
            oldIndex:0,
            itemListLoading: true,               // 设备加载判断
            itemList:[],
            EChartNmae:'',  //EChart图标题
            EChartData:'',  //EChart数据
        },
        created: function () {

        },
        methods:{
            itemFun:function(item, index){
                this.oldIndex = index;
                vm.EChartNmae=item.name;
                if(index==0){
                    lifeChart.setOption(lifeoption);
                }else{
                    lifeChart.setOption(lifeoption2);
                }
            }
        }
    });
    //给第一个echart头添加name
    if(vm.itemList[0]){
        vm.EChartNmae = vm.itemList[0].name
    }
    //获取左侧树结构
    function getZTreeList(){
        vm.leftTreeLoading = true;
        $.ajax({
            url: '/core/device/get_district_facility_device_tree/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.leftTreeLoading = false;
                    vm.leftTreeList  = response.data;
                    //获取zTree信息 并且绘制
                    renderZTree();
                    if(vm.leftTreeList[0]){
                        vm.treeTitle = {
                            id: vm.leftTreeList[0].id,
                            name: vm.leftTreeList[0].name
                        }
                    }
                } else {
                    toastr.info(response.error_msg)
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //绘制左侧树
    function renderZTree() {
        $('#treeview7').treeview({
            color: "#666",
            showBorder: false,
            data: vm.leftTreeList,
            onNodeSelected: function (event, data) {
                vm.treeTitle = {
                    id: data.id,
                    name: data.name
                };
                vm.itemList = [];
                findDevice(data);
                if(vm.itemList[0]){
                    vm.EChartNmae = vm.itemList[0].name
                }
            }
        });
    }
    //查询所有设备方法  递归
    function findDevice(data) {
        vm.itemListLoading = true;
        if(data.data_type!=3){
            if(data.children){
                for(var i=0;i<data.children.length;i++){
                    findDevice(data.children[i])
                }
            }else if(data._nodes){
                for(var i=0;i<data._nodes.length;i++){
                    findDevice(data._nodes[i])
                }
            }
        }else{
            vm.itemListLoading = false;
            vm.itemList.push({id:data.id,name:data.name});
        }
    }
    //eChart表格
    var lifeChart = echarts.init(document.getElementById("lifeChart"));
    lifeoption = {
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['0','180', '360', '540', '720', '900', '1080', '1260','1440','1620','1800','2100','2280'],
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            interval: 0.1,
            max: 1
        },
        series: [{
            name: '剩余寿命',
            color:'#0b7ac0',
            type: 'line',
            data: [1,0.98,0.97,0.95,0.93,0.91,0.90,0.87,0.8,0.7,0.55,0.40,0.3]
        },{
            name: '平行于y轴的趋势线',
            type: 'line',
            color:'red',
            markLine: {
                name: '做大寿命之',
                data: [
                    [{
                        coord: ['0', 0]
                    }, {
                        coord: ['0', 1]
                    }
                    ]
                ]
            }
        }]
    };
    lifeoption2 = {
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['0','180', '360', '540', '720', '900', '1080', '1260','1440','1620','1800','2100','2280'],
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            interval: 0.1,
            max: 1
        },
        series: [{
            name: '剩余寿命',
            color:'#0b7ac0',
            type: 'line',
            data: [1,0.99,0.97,0.96,0.95,0.93,0.90,0.87,0.8,0.7,0.65,0.50,0.4]
        },{
            name: '平行于y轴的趋势线',
            type: 'line',
            color:'red',
            markLine: {
                name: '做大寿命之',
                data: [
                    [{
                        coord: ['0', 0]
                    }, {
                        coord: ['0', 1]
                    }
                    ]
                ]
            }
        }]
    };
    lifeChart.setOption(lifeoption);

    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(".ibox-content").css({"height": $(".contentBox").height() - 40});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20});
            $(".ibox-content").css({"height": $(".contentBox").height() - 40});
        });
        //重新绘制ECharts的高度
        var width = $('.echartBox').width()-10;
        var height = $('.ibox-content').height()-10;
        var resize = {
            width: width,
            height:height
        };
        lifeChart.resize(resize);

        //获取左侧树结构
        getZTreeList();
    });
</script>
</body>
</html>